<template>
    <!-- 首页 -->
    <div style="height: fit-content;overflow: hidden;">
        <!--轮播图-->
        <div style="width: 100vw;margin: 20px auto 10px auto;">
            <carousel :imgArr="imgArr"
                      height="400px"
                      type="card"
                      direction="horizontal">
            </carousel>
        </div>

        <!--轮播图下卡片-->
        <div class="wrap">
            <el-row type="flex" class="row-bg" justify="center" :gutter="50">
                <el-col :span="6" v-for="(img, index) in smallImgArr" :key="index">
                    <el-card class="box-card" :body-style="cardBodyStyle" shadow="hover">
                        <img :src="staticPrefix + img.src" @click="goto(img.detail)" style="width: 100%">
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!--分隔-->
        <el-divider style="margin-top: 40px;margin-bottom: 20px" id="todo-divider">今日必看</el-divider>

        <!--主要内容-->
        <my-content></my-content>
    </div>


</template>

<script>
    import settings from '@/settings'
    import carousel from '@components/index/Carousel'
    import myContent from '@components/index/content/Content'

    export default {
        name: "Index",
        components:{carousel, myContent},
        data(){
            return {
                staticPrefix: settings.staticPrefix,
                cardBodyStyle:{ padding: '0',width: 316, height: 170, cursor: 'pointer', },

                imgArr: [
                    {title: "1", src: "/static/index/lbt/1.jpg", detail: 'product/XiaomiCivi/'},
                    {title: "2", src: "/static/index/lbt/2.jpg", detail: 'product/Xiaomi12/'},
                    {title: "3", src: "/static/index/lbt/3.jpg", detail: 'product/RedmiK50dj'},
                    {title: "4", src: "/static/index/lbt/4.jpg", detail: ''},
                    {title: "5", src: "/static/index/lbt/5.jpg", detail: ''},
                    {title: "6", src: "/static/index/lbt/6.jpg", detail: ''},
                    {title: "7", src: "/static/index/lbt/7.jpg", detail: ''},
                    {title: "8", src: "/static/index/lbt/8.jpg", detail: ''},
                    {title: "9", src: "/static/index/lbt/9.jpg", detail: ''},
                ],
                smallImgArr: [
                    {title: "1", src: "/static/index/card_1.jpg", detail: 'product/redmik50/'},
                    {title: "2", src: "/static/index/card_2.jpg", detail: 'product/Xiaomi12/'},
                    {title: "3", src: "/static/index/card_3.jpg", detail: ''},
                ]

            }
        },
        methods: {
            goto(page){
                this.$router.push(page)
            },
        }
    }
</script>

<style scoped>
    .wrap{
        width: 70vw;
        margin: 0 auto;
    }
    .wrap .el-col{
        flex-grow: 1;
    }

    .el-card{
        border: none;
    }
    .el-card:hover{
        transform: translateY(-5px);
    }

    #todo-divider{
        margin-top: 50px;
    }
    .el-divider__text{
        font-size: 30px;
        font-weight: 600;
    }
</style>
